<template>
  <div class="main">
    <div class="header">
      <div
        style="
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 20%;
        "
      >
        <img
          :src="headrImg == '' || headrImg == null ? imgSrc : headrImg"
          mode=""
          style="width: 40px; height: 40px; border-radius: 50%"
        />
        <div class="" style="padding-top: 3px">
          <span>
            {{ name }}
          </span>
        </div>
      </div>
      <div>
        <div class="" style="cursor: pointer" @click="into()">
          <span> 校灵通访客登记 </span>
        </div>
      </div>
      <div>
        <div class="" style="text-align: right; padding-top: 3px">
          <span style="margin-right: 10px">
            {{ time }}
          </span>
        </div>
      </div>
    </div>
    <div class="numList">
      <div style="" v-for="(item, index) in numberList" :key="index">
        <div
          class=""
          style="
            flex-direction: row;
            justify-content: space-around;
            display: flex;
            align-items: center;
            position: relative;
          "
        >
          <div
            style="
              position: absolute;
              right: -40px;
              top: 10px;
              width: 35%;
              text-align: left;
            "
          >
            <span style="font-size: 18px; white-space: nowrap">
              {{ item.title }}
            </span>
            <br />
            <span
              style="
                font-size: 40px;
                font-family: OPPOSans;
                font-weight: bold;
                color: #00ffff;
              "
            >
              {{ item.number }}
            </span>
            <span> 人 </span>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left" style="padding: 5px; box-sizing: border-box">
        <div class="content-top">
          <p class="top-title" style="z-index: 1">访客审核状态</p>
        </div>

        <div style="z-index: 1; height: 103%">
          <div class="table">
            <p
              style="
                display: flex;
                justify-content: space-around;
                height: 40px;
                align-items: center;
                z-index: 1111111;
              "
            >
              <span
                style="width: 20%; text-align: center"
                v-for="(item, index) in titleList"
                :key="index"
                >{{ item }}</span
              >
            </p>
            <div style="overflow: hidden">
              <div class="punch">
                <p
                  v-for="(item, index) in applyList"
                  :key="index"
                  style="font-size: 12px; z-index: 0"
                  class="punchList"
                >
                  <span>
                    <img mode="" :src="item.pic" alt="" />
                  </span>
                  <span style="text-align: center">
                    {{ item.visitor_name }}</span
                  >
                  <span>{{ item.visitor_phone }}</span>
                  <span>
                    <el-tag
                      v-if="item.status == 1"
                      style="
                        width: 43px;
                        height: 25px;
                        line-height: 25px;
                        text-align: center;
                        border-radius: 4px;
                        border: none;

                        font-size: 16px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #10ed68;
                        padding: 0;
                        background-color: rgba(0, 0, 0, 0);
                      "
                      >通过</el-tag
                    >
                    <el-tag
                      v-if="item.status == 2"
                      style="
                        width: 43px;
                        height: 25px;
                        line-height: 25px;
                        text-align: center;
                        border-radius: 4px;
                        border: none;
                        font-size: 16px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #ff0909;
                        padding: 0;
                        background-color: rgba(0, 0, 0, 0);
                      "
                      >拒绝</el-tag
                    >
                  </span>
                  <span>{{ item.create_time }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="center-top" style="margin: 5px; box-sizing: border-box">
          <div
            class=""
            style="
              text-align: center;
              position: relative;
              top: 14px;
              z-index: 200;
              height: 50px !important;
              font-size: 16px;
              color: #00ffff;
            "
          >
            <p style="position: relative; top: 0">累计访客数量</p>
          </div>
          <div>
            <div
              class="vitsitorNum"
              style="
                height: 200px;
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
                align-items: center;
                position: relative;
                bottom: 15px;
              "
            >
              <span style="width: 100px; height: 100px">
                <div class="center-top-left">
                  <img src="../../static/img/pagesImg/echarts.png" mode="" />
                  <img
                    class="rotate-image"
                    src="../../static/img/pagesImg/scroll.png"
                    mode=""
                  />
                  <span>
                    {{ applyStstusPersent[0].number }}%
                    <br />
                    {{ applyStstusPersent[0].status }}
                  </span>
                </div>
              </span>
              <span style="height: 100px; width: 59%">
                <div class="flip-counter">
                  <div
                    class="flip-card"
                    v-for="(digit, index) in digits"
                    :key="index"
                  >
                    <div class="flip-card-inner">
                      <div class="flip-card-front">
                        <span>{{ digit }}</span>
                      </div>
                      <div class="flip-card-back">
                        <span>{{ nextDigits[index] }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <span style="width: 100px; height: 100px">
                <span style="width: 100px; height: 100px">
                  <div class="center-top-right">
                    <img src="../../static/img/pagesImg//echarts.png" mode="" />
                    <img
                      class="rotate-image"
                      src="../../static/img/pagesImg//scroll.png"
                      mode=""
                    />
                    <span>
                      {{ applyStstusPersent[1].number }}%
                      <br />
                      {{ applyStstusPersent[1].status }}
                    </span>
                  </div>
                </span>
              </span>
            </div>
          </div>
        </div>
        <div class="center-bottom" style="margin: 5px; box-sizing: border-box">
          <div
            class=""
            style="
              text-align: center;
              position: relative;
              top: 14px;
              z-index: 200;
              height: 50px !important;
              font-size: 16px;
              color: #00ffff;
            "
          >
            <p style="position: relative; top: -0">近7天访客趋势</p>
          </div>
          <div class="" id="main"></div>
        </div>
      </div>
      <div class="right" style="padding: 5px; box-sizing: border-box">
        <div class="content-top">
          <p class="top-title" style="z-index: 1">访客待审核</p>
        </div>
        <div style="z-index: 1; height: 103%">
          <div class="table" style="z-index: 1">
            <p
              style="
                display: flex;
                justify-content: space-around;
                height: 40px;
                align-items: center;
              "
            >
              <span
                style="width: 20%; text-align: center"
                v-for="(item, index) in titleList"
                :key="index"
                >{{ item }}</span
              >
            </p>
            <div style="overflow: hidden">
              <div class="punch">
                <p
                  v-for="(item, index) in awaitList"
                  :key="index"
                  style="font-size: 12px; z-index: 0"
                  class="punchList"
                >
                  <span>
                    <img mode="" :src="item.pic" alt="" />
                  </span>
                  <span style="text-align: center">
                    {{ item.visitor_name }}</span
                  >
                  <span>{{ item.visitor_phone }}</span>
                  <span>
                    <el-tag
                      style="
                        width: 57px;
                        height: 25px;
                        line-height: 25px;
                        text-align: center;
                        border: none;
                        border-radius: 4px;
                        font-size: 16px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #1396ff;
                        padding: 0;
                        background-color: rgba(0, 0, 0, 0);
                      "
                      >待审核</el-tag
                    >
                  </span>
                  <span>{{ item.create_time }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { center } from "@/api/police";
const echarts = require("echarts");
import {
  dpStatistics,
  dpUnshhList,
  dpshhList,
  dpWeekInfo,
} from "@/api/school/dataScreen";
export default {
  data() {
    return {
      time: "",
      headrImg: "",
      imgSrc: require("@/static/img/top/visitor.png"),
      name: "",
      titleList: ["访客人像", "姓名", "手机号", "审批状态", "时间"],
      applyList: [],
      awaitList: [],
      count: 0,
      digits: [],
      nextDigits: [],
      applyStstusPersent: [
        {
          number: 67.95,
          status: "通过",
        },
        {
          number: 32.05,
          status: "拒绝",
        },
      ],
      numberList: [
        {
          title: "今日访客",
          number: 0,
          src: require("../../static/img/pagesImg/bag.png"),
        },
        {
          title: "今日通过访客",
          number: 0,
          src: require("../../static/img/pagesImg/bag.png"),
        },
        {
          title: "今日拒绝访客",
          number: 0,
          src: require("../../static/img/pagesImg/bag.png"),
        },
        {
          title: "今日待审核访客",
          number: 0,
          src: require("../../static/img/pagesImg/bag.png"),
        },
      ],
      datas: {
        token: "",
      },
      pamas: {
        ywlsh: JSON.parse(localStorage.getItem("userInfo")).user.ywlsh,
      },
      weekInfo: [],
    };
  },
  computed: {},
  components: {},
  onLaunch() {},
  mounted() {
    this.api();

    setInterval(() => {
      this.updateTime();
    }, 1000);
    // this.initEcharts();
    this.initCenter();
    this.startCounting();
  },
  methods: {
    initCenter() {
      console.log(JSON.parse(localStorage.getItem("userInfo")).token);
      this.datas.token = JSON.parse(localStorage.getItem("userInfo")).token;
      // console.log(this.$VueCookies.get("token"));
      center(this.datas).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.headrImg = res.data.avatar;
          this.name = res.data.user_name;
        } else if (res.code == 401) {
          alert(res.message);
        }
      });
    },
    into() {
      this.$router.push("/admin/punchLogSchool");
    },
    startCounting() {
      // setInterval(() => {
      // this.count++;
      dpStatistics(this.pamas).then((res) => {
        console.log(res);
        this.count = res.ljfk;
        this.applyStstusPersent[0].number = res.ljtgfk;
        this.applyStstusPersent[1].number = res.ljjjfk;
        this.numberList[0].number = res.jrfk;
        this.numberList[1].number = res.jrtgfk;
        this.numberList[2].number = res.jrjjfk;
        this.numberList[3].number = res.jrdshhfk;
        this.updateDigits();
      });
      // }, 1000);
    },
    updateDigits() {
      const countStr = this.count.toString().padStart(7, "0");
      this.digits = countStr.split("");
      this.nextDigits = this.count.toString().padStart(7, "0").split("");
    },
    async api() {
      await dpshhList(this.pamas).then((res) => {
        console.log(res);
        if (res.code == 200) {
          res.data.res.forEach((item) => {
            item.create_time = item.create_time.substring(5, 16);
            // console.log(item.create_time)
          });
          this.applyList = res.data.res;
        }
      });
      await dpUnshhList(this.pamas).then((res) => {
        console.log(res);
        if (res.code == 200) {
          res.data.res.forEach((item) => {
            item.create_time = item.create_time.substring(5, 16);
            // console.log(item.create_time)
          });
          this.awaitList = res.data.res;
        }
      });
      await dpWeekInfo(this.pamas).then((res) => {
        console.log(res.data);
        if (res.code == 200) {
          this.weekInfo = res.data.reverse();
          this.initEcharts();
        }
      });
    },
    updateTime() {
      const date = new Date();
      const years =
        date.getFullYear() < 10 ? "0" + date.getFullYear() : date.getFullYear();
      const month =
        date.getMonth() < 10 ? "0" + date.getMonth() + 1 : date.getMonth() + 1;
      const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      const hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      const minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      const seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      this.time = `${years}年 ${month}月 ${day}日 ${hours}:${minutes}:${seconds}`;
    },

    initEcharts() {
      const main = this.$echarts.init(document.getElementById("main"));
      console.log(this);
      const option = {
        grid: {
          left: "1%",
          right: "4%",
          bottom: "6%",
          top: 40,
          padding: "0 0 0 0",
          containLabel: true,
        },
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "shadow",
        //   },
        // },
        tooltip: {
          //提示框组件
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (value, index) {
            // console.log(value);
            let a =
              value[0].name +
              "<br/>" +
              "<span style='display:inline-block;font-size:16px;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
              value[0].seriesName +
              " : " +
              Number(value[0].value).toLocaleString() +
              " 例<br/>";
            let b =
              "<span style='display:inline-block;font-size:16px;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
              value[1].seriesName +
              " : " +
              Number(value[1].value).toLocaleString() +
              " 例<br/>";
            return a + b;
          },
          textStyle: {
            color: "black",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },

        legend: {
          //图例组件，颜色和名字
          icon: "circle",
          orient: "horizontal",
          right: 10,
          top: 0,
          itemGap: 16,
          itemWidth: 18,
          itemHeight: 10,

          data: [
            {
              name: "通过",
            },
            {
              name: "拒绝",
            },
          ],
          textStyle: {
            color: "#a8aab0",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true, //坐标轴两边留白
            data: this.weekInfo.map((item) => {
              return item.date;
            }),
            //  [
            //   "11-21",
            //   "11-22",
            //   "11-23",
            //   "11-24",
            //   "11-25",
            //   "11-26",
            //   "11-27",
            // ],
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
              margin: 13,
              textStyle: {
                color: "#DCDCDC",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12,
              },
            },
            axisTick: {
              //坐标轴刻度相关设置。
              show: false,
            },
            axisLine: {
              //坐标轴轴线相关设置
              lineStyle: {
                color: "#fff",
                opacity: 0.2,
              },
            },
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 10,
            axisLabel: {
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12,
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#fff"],
                opacity: 0.06,
              },
            },
          },
        ],
        series: [
          {
            name: "通过",
            type: "bar",
            data: this.weekInfo.map((item) => {
              return item.agreeNumbers;
            }),
            barWidth: 20,
            barGap: 1, //柱间距离
            label: {
              //图形上的文本标签
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 12,
                },
              },
            },
            itemStyle: {
              //图形样式
              normal: {
                // linear-gradient(0deg, #5267FF #5267FF 0%, #09193F 100%)
                barBorderRadius: [0, 0, 0, 0],
                borderColor: "rgba(76, 97, 255, 1)", // 设置边框颜色 4C61FF
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 1,
                      color: "rgba(82, 103, 255, 1)",
                    },
                    {
                      offset: 0,
                      color: "rgba(9, 25, 63, 1)",
                    },
                  ],
                  false
                ),
              },
            },
          },
          {
            name: "拒绝",
            type: "bar",
            data: this.weekInfo.map((item) => {
              return item.refuseNumbers;
            }),
            barWidth: 20,
            barGap: 1, //柱间距离
            label: {
              //图形上的文本标签
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 12,
                },
              },
            },
            itemStyle: {
              //图形样式
              normal: {
                barBorderRadius: [0, 0, 0, 0],
                borderColor: "rgba(50, 166, 255, 1)", // 设置边框颜色
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 1,
                      color: "rgba(60, 255, 253, 1)", //rgba(60, 255, 253, 1)
                    },
                    {
                      offset: 0,
                      color: "rgba(9, 25, 63, 1)",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      main.setOption(option);
      // ============================= 访客通过图表

      window.addEventListener("resize", function () {
        main.resize();
      });
    },
  },
};
</script>
<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.center_top_title {
}
.top-title {
  font-size: 16px;
}
.rotate-image {
  transform-origin: center center;
  /* 设置旋转的中心点为图片的中心 */
  animation: rotate 20s infinite linear;
  /* 使用动画实现旋转效果 */
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
    /* 起始角度为0度 */
  }

  to {
    transform: rotate(360deg);
    /* 终止角度为360度 */
  }
}

.center-top-left {
  position: relative;
  width: 100px;
  height: 100px;
  text-align: center;
  left: 12px;
}

.center-top-right {
  position: relative;
  width: 100px;
  height: 100px;
  text-align: center;
  right: 12px;
}
.center-top-left img:nth-of-type(1) {
  width: 120px;
  height: 120px;
  position: absolute;
  left: 52%;
  top: 52%;
  transform: translate(-50%, -50%);
}

.center-top-left img:nth-of-type(2) {
  width: 120px;
  height: 120px;
  position: absolute;
  left: -12%;
  top: -11%;
  transform: translate(-50%, -50%);
}

.center-top-left span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: #ffffff;
}

.center-top-right img:nth-of-type(1) {
  width: 120px;
  height: 120px;
  position: absolute;
  left: 52%;
  top: 52%;
  transform: translate(-50%, -50%);
}

.center-top-right img:nth-of-type(2) {
  width: 120px;
  height: 120px;
  position: absolute;
  left: -12%;
  top: -11%;
  transform: translate(-50%, -50%);
}

.center-top-right span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: #ffffff;
}
.flip-counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.flip-card {
  margin: 0 5px;
  perspective: 1000px;
  width: 80px;
  height: 110px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background-image: url(../../static/img/pagesImg//numberBg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid #ccc;

  font-size: 70px;
  font-family: OPPOSans;
  font-weight: bold;
  color: #00ffff;
}

.flip-card-back {
  transform: rotateY(180deg);
}

.number-item:last-child {
  margin-right: 0;
}

.center-bottom {
  background-image: url(../../static/img/pagesImg//centerBottom.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.table {
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 15px;
  height: 89%;
}

.punch {
  z-index: -1;
  animation: scroll 100s linear infinite;
}

.punch:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

/* :class="item.status == 1 ? 'success' : 'refuse'" */
.success {
  color: red;
}

.refuse {
  color: aqua;
}

.tagRefuse {
  border: 1px greenyellow solid;
  color: greenyellow;
  width: 20px;
  text-align: center;
  height: 15px;
  line-height: 15px;
}

.punchList {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 65px;
  line-height: 65px;
  margin-top: 5px;
  background: linear-gradient(90deg, #2762d9, rgba(39, 98, 217, 0));
  opacity: 0.95;
  color: #fff;
  /* animation: scroll 5s linear infinite; */
}

.punchList span {
  width: 20%;
  text-align: center;
  height: 70px;
  line-height: 70px;
  white-space: nowrap;
  width: auto;
  flex: 1;
  position: relative;
  font-size: 16px;
}
.punchList span img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  height: 75%;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

.center-top {
  background-image: url(../../static/img/pagesImg//centerTop.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.vitsitorNum > span {
  display: block;
  height: 60%;
  margin-top: 0%;
}

.main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url(../../static/img/pagesImg//background.png);
}

.header {
  height: 68px;
  line-height: 68px;
  display: flex;
  justify-content: space-evenly;
  background-image: url(../../static/img/pagesImg//top.png);
  background-size: 103% 100%;
  background-repeat: no-repeat;
  text-align: center;
}

.numList {
  margin: 10px 0;
  height: 186px;
  /* border: 1px red solid; */
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0 5px;
  box-sizing: border-box;
}

.numList > div {
  width: 24.6%;
  background-image: url(../../static/img/pagesImg//bag.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}

.numList > div > div {
  position: absolute;
  right: 50px;
  top: 23px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #00ffff;
}

.header > div {
  // border: 1px red solid;
}

.header > div:nth-of-type(1) {
  padding-left: 50px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #15f5fd;
  line-height: 42px;
}

.header > div:nth-of-type(1) > div {
  padding-left: 10px;
}

.header > div:nth-of-type(2) {
  flex: 1;
  font-size: 40px;
  /* background-color: #00EAFF; */
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(
    92deg,
    #0072ff 0%,
    #00eaff 48.8525390625%,
    #01aaff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header > div:nth-of-type(3) {
  width: 150px;
  width: 20%;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #15f5fd;
}

.content {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0 10px;
  box-sizing: border-box;
}

.content > div {
  /* background-color: brown; */
  height: 99%;
  display: flex;
  /* border: 1px red solid; */
}

.left {
  width: 25%;
  display: flex;
  flex-direction: column;
  background-image: url(../../static/img/pagesImg//status.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  color: #00ffff;
  overflow: hidden;
}

.center {
  color: red;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.center > div:nth-of-type(1) {
  margin: 5px 5px 10px 5px;
  height: 220px;
}

.center > div:nth-of-type(2) {
  flex: 1;
}

#main {
  width: 90%;
  /* height: 90.8%; */
  height: 87%;
  margin: 0 auto;
}

.right {
  width: 25%;
  display: flex;
  flex-direction: column;
  background-image: url(../../static/img/pagesImg//status.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  color: #00ffff;
}

/* .content>div:nth-of-type(2) div:nth-of-type(1) {
		color: black;
		height: 100%;
		width: 100%;
		background-color: beige;
	}

	.content div:nth-of-type(2) div:nth-of-type(2) {
		color: black;
		width: 100%;
		background-color: antiquewhite;
		height: 80%;
		flex: 1;
	} */

.content-top {
  text-align: center;
  position: relative;
  top: 12px;
  z-index: 200;
  height: 50px !important;
  font-size: 20px;
}

.tag {
  width: 20px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  display: flex;
}
</style>

